<script setup lang="ts">
import {inject, ref} from 'vue'
import {useCounterStore} from "../stores/counter";

const printToTerm = inject('printToTerm') as (text: string) => void
const setTaskBar = inject('setTaskBar') as (text: string, progress?: number) => void
const counterStore = useCounterStore()

interface Container {
  id: string
  name: string
  image: string
  status: string
  ports: string
  created: string
}

const containers = ref<Container[]>([])
const loading = ref(false)
const error = ref('')

const fetchRunningContainers = async () => {
  try {
    loading.value = true
    setTaskBar('正在获取运行中的容器...', 30)
    // @ts-ignore
    const result = await window.pywebview.api.getRunningContainers()
    if (result.suc) {
      containers.value = result.containers
      const hasRegistry = containers.value.some(container => container.name === 'registry');
      if (hasRegistry) {
        console.log('检测到Docker Registry')
      }
      counterStore.hasRegistry = hasRegistry
      setTaskBar('获取容器列表完成', 100) // 假设获取完成后进度条满
    } else {
      error.value = result.msg
    }
  } catch (e) {
    error.value = '获取容器列表失败'
    setTaskBar('获取容器列表失败', 0) // 假设获取失败后进度条为0
  } finally {
    loading.value = false
  }
}

const stopContainer = async (containerId: string) => {
  try {
    loading.value = true
    setTaskBar('正在停止容器...')
    // @ts-ignore
    const result = await window.pywebview.api.stopContainer(containerId)
    if (result.suc) {
      await fetchRunningContainers()
      error.value = ''
      setTaskBar('容器停止成功', 100) // 假设停止成功后进度条满
    } else {
      error.value = result.msg
    }
  } catch (e) {
    error.value = '停止容器失败'
    setTaskBar('停止容器失败', 0) // 假设停止失败后进度条为0
  } finally {
    loading.value = false
  }
}
const logContainer = async (containerId: string) => {
  try {
    loading.value = true
    setTaskBar('正在获取容器日志...')
    // @ts-ignore
    const result = await window.pywebview.api.logContainer(containerId)
    if (result.suc) {
      await fetchRunningContainers()
      error.value = ''
      setTaskBar('容器日志获取成功', 100) // 假设停止成功后进度条满
    } else {
      error.value = result.msg
    }
  } catch (e) {
    error.value = '容器日志获取失败'
    setTaskBar('容器日志获取失败', 0) // 假设停止失败后进度条为0
  } finally {
    loading.value = false
  }
}
const reloadCaddyfile = async (containerId: string) => {
  try {
    loading.value = true
    setTaskBar('正在重新加载Caddyfile...')
    // @ts-ignore
    const result = await window.pywebview.api.reloadCaddyfile(containerId)
    if (result.suc) {
      await fetchRunningContainers()
      error.value = ''
      setTaskBar('Caddyfile重载成功', 100) // 假设停止成功后进度条满
    } else {
      error.value = result.msg
    }
  } catch (e) {
    error.value = 'Caddyfile重载失败'
    setTaskBar('Caddyfile重载失败', 0) // 假设停止失败后进度条为0
  } finally {
    loading.value = false
  }
}

// 初始化时自动获取容器列表
fetchRunningContainers()
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center space-x-2">
      <button @click="fetchRunningContainers" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        刷新容器列表
      </button>
      <span v-if="loading" class="text-sm text-gray-500">加载中...</span>
    </div>

    <div v-if="error" class="text-red-500 text-sm">
      {{ error }}
    </div>

    <div v-if="containers.length > 0" class="bg-gray-50 p-3 rounded">
      <h3 class="font-medium mb-2">运行中的容器</h3>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-100">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              操作
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              容器ID
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              名称
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              镜像
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              状态
            </th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              端口
            </th>

          </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(container, index) in containers" :key="index">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              <button @click="stopContainer(container.id)"
                      class="bg-red-500 hover:bg-red-700 text-white px-3 py-1 rounded text-sm mx-1">
                停止
              </button>
              <button @click="logContainer(container.id)"
                      class="bg-red-500 hover:bg-red-700 text-white px-3 py-1 rounded text-sm mx-1">
                日志
              </button>
              <button @click="reloadCaddyfile(container.id)" v-if="container.name==='caddy_container'"
                      class="bg-red-500 hover:bg-red-700 text-white px-3 py-1 rounded text-sm mx-1">
                重载Caddyfile
              </button>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                container.id.substring(0,
                    12)
              }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ container.name }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ container.image }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ container.status }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ container.ports }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-else class="text-gray-500 text-sm">
      没有运行中的容器
    </div>
  </div>
</template>